<!-- eslint-disable no-trailing-spaces -->
<template>
  <div>
    <modal-header :right="title" @back="close" />
    <div class="content-padding">
      <a-form
        layout="inline"
        :labelCol="{ style: 'width: 78px' }"
        class="nmv-search-form-auto"
        style="background-color: white"
      >
        <a-form-item label="跟进人员">
          <a-input
            placeholder="请输入跟进人员"
            v-model="grid.queryParams.trackUser"
            class="nmv-w-200"
          />
        </a-form-item>
        <a-form-item label="订单编号">
          <a-input
            placeholder="请输入订单编号"
            v-model="grid.queryParams.orderNo"
            class="nmv-w-200"
          />
        </a-form-item>
        <a-form-item label="订单类型">
          <a-select
            v-model="grid.queryParams.orderType"
            allowClear
            @change="searchQuery"
            placeholder="请选择"
            class="nmv-w-200"
          >
            <a-select-option value="0">租车订单</a-select-option>
            <a-select-option value="4">维修工单</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="跟进状态">
          <a-select
            v-model="grid.queryParams.logStatus"
            allowClear
            @change="searchQuery"
            placeholder="请选择"
            class="nmv-w-200"
          >
          <a-select-option value="1">未跟进</a-select-option>
            <a-select-option value="2">跟进中</a-select-option>
            <a-select-option value="3">跟进完成</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="跟进时间">
          <a-range-picker
            style="width: 320px"
            v-model="time"
            format="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            @change="rangeTimeOk"
          ></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchQuery">查询</a-button>
          <a-button style="margin-left: 12px" @click="queryReset"
            >重置</a-button
          >
        </a-form-item>
      </a-form>
      <div style="display: flex">
        <span style="font-size: 16px;color: #000; font-weight: 500; margin-right: 32px"
          >总计：{{
            grid.counts.processed + grid.counts.inProgress+grid.counts.toBeProcessed
          }}条</span
        >
        <span
          style="font-size: 16px; color: #000;font-weight: 500;margin-right: 32px;
          "
          >未跟进：{{ grid.counts.toBeProcessed }}</span
        ><span
          style="font-size: 16px; color: #000;font-weight: 500;
            margin-right: 32px;
          "
          >跟进中：{{ grid.counts.inProgress }}</span
        ><span style="font-size: 16px; color: #000; font-weight: 500"
          >跟进完成：{{ grid.counts.processed }}</span
        >
      </div>
    </div>
    <div class="content-padding" style="padding-top: 0">
      <a-table
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 1300 }"
        :loading="grid.load"
        :columns="grid.columns"
        :data-source="grid.data"
        :locale="locale"
      >
      </a-table>
      <div v-show="grid.total !== 0" style="text-align: right">
        <a-pagination
          show-size-changer
          @showSizeChange="onShowSizeChange"
          :pageSize="grid.queryParams.pageSize"
          :current="grid.queryParams.pageNum"
          @change="onChange"
          style="margin-top: 20px"
          size="small"
          :total="grid.total"
          :show-total="(total) => `共${grid.total}条 `"
        />
      </div>
    </div>
    <a-drawer
      title="跟进记录"
      placement="right"
      :closable="false"
      width="680px"
      :visible="visible"
      @close="onClose"
    >
      <a-timeline :pending="false">
        <a-timeline-item v-for="(v, i) in recordList" :key="i" v-show="i === 0">
          <img
            slot="dot"
            style="width: 16px; height: 16px"
            src="../../../assets/img/checked@2x.png"
            alt=""
          />
          <div>
            <p
              style=" display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span style="font-size: 16px; color: #333333; font-weight: 500">{{
                v.opUser
              }}</span>
              <span style="font-size: 14px; color: #606266">{{
                v.createTime
              }}</span>
            </p>
            <div
              style="padding: 16px;
                background: #f5f5f5;
                border-radius: 8px;
                font-size: 14px;
              "
            >
              {{ v.content }}
            </div>
          </div>
        </a-timeline-item>
        <a-timeline-item v-for="(v, i) in recordList" :key="i" v-show="i !== 0">
          <div>
            <p
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span style="font-size: 16px; color: #333333; font-weight: 500">{{
                v.opUser
              }}</span>
              <span style="font-size: 14px; color: #606266">{{
                v.createTime
              }}</span>
            </p>
            <div
              style="
                padding: 16px;
                background: #f5f5f5;
                border-radius: 8px;
                font-size: 14px;
              "
            >
              {{ v.content }}
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
      <div style="display: flex; justify-content: center" v-if="flag">
        <a-button type="primary" ghost @click="moreList">
          点击加载更多
        </a-button>
      </div>
    </a-drawer>
    <a-modal v-model="fallowVis" title="跟进" centered @ok="handleOk">
      <p>订单编号：{{orderItem.orderNo}} <a @click="toOrder(orderItem.orderType)">查看</a></p>
      <a-input type="textarea" v-model.trim="content"  :rows="4" style="width:100%;"
                placeholder="请输入跟进内容"></a-input>
    </a-modal>
  </div>
</template>

<script>
import modalHeader from '@/components/modal-header'
import { fallowList, fallowListDetail, fallowListData } from '@/services/home'
import { orderOverdueSubmit, overDone } from '@/services/orderOverdue'
import Empty from '@/components/Empty/Empty'
export default {
  components: {
    modalHeader
  },
  data () {
    return {
      content: '',
      orderItem: {},
      fallowVis: false,
      time: [],
      flag: true,
      recordList: [],
      recordPar: {
        pageSize: 10,
        pageNum: 1
      },
      load: false,
      title: '跟进列表',
      locale: {
        emptyText: <Empty />
      },
      visible: false,
      grid: {
        load: false,
        counts: {},
        columns: [
          {
            dataIndex: 'orderNo',
            key: 'orderNo',
            title: '订单编号',
            customRender: (text, record) =>
              record.orderType === 4 ? <span>{text}</span>
                : <a onClick={() => this.toOrderItem(record)}>{text}</a>
          },
          {
            dataIndex: 'orderType',
            key: 'orderType',
            title: '订单类型',
            width: 120,
            customRender: (text) =>
              text === 0
                ? '租车订单'
                : text === 1
                  ? '押金订单'
                  : text === 1
                    ? '套餐订单'
                    : '维修订单'
          },
          {
            dataIndex: 'logStatus',
            key: 'logStatus',
            title: '跟进状态',
            width: 140,
            customRender: (text) =>
              text === 2 ? (
                <span class="flex_start">
                  <span class="yuan orange"></span>跟进中
                </span>
              ) : text === 3 ? (
                <span class="flex_start">
                  <span class="yuan green"></span>跟进完成
                </span>
              ) : (
                <span class="flex_start">
                  <span class="yuan gray"></span>未跟进
                </span>
              )
          },
          {
            dataIndex: 'vehicleOrderStatus',
            key: 'vehicleOrderStatus',
            title: '订单状态',
            width: 140,
            customRender: (text, record) =>
              record.orderType === 0 ? <span>
                {+record.vehicleOrderStatus === 1 ? (
                  <a-tag class="color_orange">待支付</a-tag>
                ) : +record.vehicleOrderStatus === 2 ? (
                  <a-tag class="color_blue">待取车</a-tag>
                ) : +record.vehicleOrderStatus === 3 ? (
                  <a-tag class="color_green">进行中</a-tag>
                ) : +record.vehicleOrderStatus === 4 ? (
                  <a-tag class="color_gray">已完成</a-tag>
                ) : +record.vehicleOrderStatus === 5 ? (
                  <a-tag class="color_gray">已取消</a-tag>
                ) : +record.vehicleOrderStatus === 6 ? (
                  <a-tag class="color_gray">已关闭</a-tag>
                ) : +record.vehicleOrderStatus === 7 ? (
                  <a-tag class="color_red">已逾期</a-tag>
                ) : +record.vehicleOrderStatus === 8 ? (
                  <a-tag class="color_jin">已退订</a-tag>
                ) : +record.vehicleOrderStatus === 9 ? (
                  <a-tag class="color_lightBlue">待生效</a-tag>
                ) : (
                  <a-tag class="color_jin">已退款</a-tag>
                )}
              </span>
                : record.orderType === 4 ? <span>
                  {record.repairOrderStatus === 'PENDING' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_lightBlue">
                      待确认
                    </a-tag>
                  ) : record.repairOrderStatus === 'UNPAID' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_orange" >
                      待支付
                    </a-tag>
                  ) : record.repairOrderStatus === 'TO_BE_ACCEPTED' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_red" >
                      待处理
                    </a-tag>
                  ) : record.repairOrderStatus === 'REPAIR_COMPLETED' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_blue" >
                      待取车
                    </a-tag>
                  ) : record.repairOrderStatus === 'COMPLETED' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_green" >
                      已完成
                    </a-tag>
                  ) : record.repairOrderStatus === 'CLOSED' ? (
                    <a-tag style="width:58px;text-align:center;" class="color_gray" >
                      已关闭
                    </a-tag>
                  )
                    : ''
                  }
                </span>
                  : ''
          },
          {
            dataIndex: 'trackUser',
            key: 'trackUser',
            title: '跟进人员',
            customRender: text => text || '-'
          },
          {
            dataIndex: 'updateTime',
            key: 'updateTime',
            title: '末次跟进时间'
          },

          {
            dataIndex: 'action',
            key: 'action',
            title: '操作',
            fixed: 'right',
            width: 220,
            customRender: (text, record) => (
              <div>
                <a onClick={() => this.toRecord(record)}>查看</a>
                {record.logStatus !== 3 ? (
                  <span>
                    <a-divider type="vertical" />
                    <a onClick={() => this.addFallow(record)}>添加跟进</a>
                  </span>
                ) : (
                  ''
                )}
                {record.logStatus !== 3 ? (
                  <span>
                    <a-divider type="vertical" />
                    <a-popconfirm
                      title="是否确认结束处理该订单?"
                      ok-text="确认"
                      cancel-text="取消"
                      onConfirm={() => this.confirm(record)}
                    >
                      <a style="color:red">结束跟进</a>
                    </a-popconfirm>

                  </span>
                ) : (
                  ''
                )}
              </div>
            )
          }
        ],
        total: 0,
        data: [],
        queryParams: {
          pageSize: 10,
          pageNum: 1
        }
      }
    }
  },
  methods: {
    async confirm (record) {
      const res = await overDone(record.id)

      if (res.isSuccess) {
        this.$message.newFun('操作成功!', 'success', 3)
        this._fallowList()
        this._fallowListData()
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    // 跳转订单详情
    toOrder (type) {
      if (type === 0) {
        window.open('/#/order/orderManager/vehicleOrder?id=' + this.orderItem.orderId)
      } else if (type === 4) {

        // window.open('/#/repair/repairManager/repair?id=' + this.orderItem.orderId)
      }
    },
    toOrderItem (record) {
      console.log(record)
      if (record.orderType === 0) {
        window.open('/#/order/orderManager/vehicleOrder?id=' + record.orderId)
      } else if (record.orderType === 4) {
        // window.open('/#/repair/repairManager/repair?id=' + record.orderId)
      }
    },
    // 确认跟进
    handleOk () {
      if (this.content === '') {
        this.$message.newFun('请输入跟进内容', 'error', 3)
      } else {
        this._orderOverdueSubmit()
      }
    },
    async _orderOverdueSubmit () {
      const res = await orderOverdueSubmit(this.orderItem.id, { content: this.content })
      if (res.isSuccess) {
        this.$message.newFun('跟进成功!', 'success', 3)
        this._fallowList()
        this._fallowListData()
        this.fallowVis = false
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    addFallow (record) {
      this.orderItem = record
      this.fallowVis = true
    },
    moreList () {
      this.recordPar.pageSize = this.recordPar.pageSize + 10
    },
    toRecord (record) {
      this.visible = true
      this._fallowListDetail(record.id)
    },
    onClose () {
      this.visible = false
    },
    searchQuery () {
      this.grid.queryParams.pageSize = 10
      this.grid.queryParams.pageNum = 1
      this._fallowList()
    },
    queryReset () {
      this.grid.queryParams = {
        pageSize: 10,
        pageNum: 1
      }
      this._fallowList()
    },
    rangeTimeOk (value) {
      if (value.length > 0) {
        const [start, end] = value
        this.grid.queryParams.beginTime = start.format('YYYY-MM-DD HH:mm:ss')
        this.grid.queryParams.endTime = end.format('YYYY-MM-DD HH:mm:ss')
      } else {
        delete this.grid.queryParams.beginTime
        delete this.grid.queryParams.endTime
        this.time = []
      }

      this._fallowList()
    },
    async _fallowListData () {
      const res = await fallowListData()
      if (res.isSuccess) {
        this.grid.counts = res.data
      }
    },
    async _fallowListDetail (id) {
      const res = await fallowListDetail(this.recordPar, id)
      if (res.isSuccess) {
        this.recordList = res.data.records
        if (this.recordList.length === res.data.total) {
          this.flag = false
        }
      }
    },
    async _fallowList () {
      this.grid.load = true
      const res = await fallowList(this.grid.queryParams)
      if (res.isSuccess) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
        this.grid.load = false
      } else {
        this.grid.load = false
      }
    },
    onChange (page, pageSize) {
      console.log(page, '/////')
      this.grid.queryParams.pageNum = page
      this._fallowList()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      this._fallowList()
    },
    open () {
      this._fallowList()
      this._fallowListData()
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style>
</style>
